<template>
  <div>
    <p>排班时间（可自行输入开始时间）</p>
    批量添加星期
    <el-select
      v-model="wakValue"
      multiple
      placeholder="请选择"
      style="width: 500px"
    >
      <el-option
        v-for="items in wakOptions"
        :key="items.name"
        :label="items.name"
        :value="items.name"
      />
    </el-select>
    <el-button @click="addItemList(wakValue)">添加</el-button>

    <div v-if="tableData.length != 0" style="margin-top: 10px">
      批量添加时间
      <el-time-picker
        v-model="start_time"
        format="HH:mm"
        :picker-options="{
          selectableRange: `${
            startTimePicker.start ? startTimePicker.start : '00:00:00'
          } - ${startTimePicker.end ? startTimePicker.end : '23:59:59'}`,
        }"
        placeholder="起始时间"
        value-format="HH:mm"
      />
      <el-time-picker
        v-model="end_time"
        format="HH:mm"
        :picker-options="{
          selectableRange: `${
            startTimePicker.start ? startTimePicker.start : '00:00:00'
          } - ${startTimePicker.end ? startTimePicker.end : '23:59:59'}`,
        }"
        placeholder="结束时间"
        value-format="HH:mm"
      />
      <el-button @click="addStr(start_time, end_time)">添加</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" prop="scheduling_week" width="100" />
        <el-table-column label="开始时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-picker
                v-model="item.start_time"
                format="HH:mm"
                :picker-options="{
                  selectableRange: `${
                    startTimePicker.start ? startTimePicker.start : '00:00:00'
                  } - ${
                    startTimePicker.end ? startTimePicker.end : '23:59:59'
                  }`,
                }"
                placeholder="起始时间"
                value-format="HH:mm"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="name">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-time-picker
                v-model="item.end_time"
                format="HH:mm"
                :picker-options="{
                  selectableRange: `${
                    startTimePicker.start ? startTimePicker.start : '00:00:00'
                  } - ${
                    startTimePicker.end ? startTimePicker.end : '23:59:59'
                  }`,
                }"
                placeholder="结束时间"
                value-format="HH:mm"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="address">
          <template slot-scope="scope">
            <!-- <el-button @click="addItemData(scope.row)">添加</el-button> -->
            <div
              v-for="(item, index) in scope.row.item_list"
              :key="index"
              style="margin-top: 10px"
            >
              <el-button
                circle
                icon="el-icon-delete"
                type="danger"
                @click.native="delItemData(index, scope)"
              />
              <el-button
                v-if="index == 0"
                circle
                icon="el-icon-plus"
                type="primary"
                @click.native="addItemData(index, scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <br />
    <div v-permissions="{ permission: ['edit:Scheduling'] }">
      <el-button style="margin-top: 30px" type="primary" @click="Submit">
        保存
      </el-button>

      <el-button style="margin-top: 30px" @click="$emit('send')">
        取消
      </el-button>
      <el-button v-if="satr" type="danger" @click="deleteScheduling">
        删除排班
      </el-button>
    </div>
  </div>
</template>

<script>
  import { addScheduling, delScheduling } from '@/api/scheduling'
  export default {
    props: {
      startTimePicker: {
        type: Object,
        required: true,
      },
      form: {
        type: Object,
        required: true,
      },
      itemdatae: {
        type: Array,
        required: true,
      },
      pickerlist: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        start_time: '',
        end_time: '',
        tableData: [],
        wakValue: '',
        wakOptions: [
          {
            name: '周一',
          },
          {
            name: '周二',
          },
          {
            name: '周三',
          },
          {
            name: '周四',
          },
          {
            name: '周五',
          },
          {
            name: '周六',
          },
          {
            name: '周日',
          },
        ],
        itemDatas: [],
        satr: false,
      }
    },
    watch: {
      itemdatae() {
        if (this.itemdatae.length > 0) {
          this.tableData = this.itemdatae
          this.satr = true
        } else {
          this.tableData = []
          this.satr = false
        }
      },
    },
    mounted() {
      if (this.itemdatae.length > 0) {
        this.satr = true
        this.tableData = this.itemdatae
      } else {
        this.tableData = []
        this.satr = false
      }
    },
    methods: {
      addStr(e, r) {
        this.tableData.forEach((j) => {
          j.item_list.push({
            start_time: e,
            end_time: r,
          })
        })
      },
      addItemList(wakValue) {
        this.tableData = []
        wakValue.forEach((j) => {
          this.tableData.push({
            scheduling_week: j,
            item_list: [
              {
                start_time: this.pickerlist.morning_start_time,
                end_time: this.pickerlist.morning_end_time,
              },
              {
                start_time: this.pickerlist.afternoon_start_time,
                end_time: this.pickerlist.afternoon_end_time,
              },
            ],
          })
        })
      },
      addItemData(i, e) {
        this.tableData.forEach((j) => {
          if (e.scheduling_week == j.scheduling_week) {
            j.item_list.push({
              start_time: '',
              end_time: '',
            })
          }
        })
      },
      delItemData(i, e) {
        this.tableData.forEach((j) => {
          if (e.row.scheduling_week == j.scheduling_week) {
            if (j.item_list.length == 1) {
              this.tableData.splice(e.$index, 1)
            } else {
              j.item_list.splice(i, 1)
            }
          }
        })
      },

      Submit() {
        const forms = {}
        forms.user_id = this.form.user_id
        forms.interval_time = this.form.interval_time
        forms.rest_time = this.form.rest_time

        forms.type = 'week'
        const jy = {
          user_id: '选择员工',
          interval_time: '排班间隔',
          rest_time: '休息时间',
        }

        if (Object.keys(forms).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in forms) {
            if (forms[key] == '' || forms[key] == null) {
              this.$message.error(jy[key])
              return
            }
          }
          if (this.tableData.length == 0) {
            this.$message.error('请填写排班时间段')
            return
          } else {
            // this.tableData.forEach((e) => {
            for (let e of this.tableData) {
              for (let item of e.item_list) {
                for (var keys in item) {
                  if (item[keys] == '' || item[keys] == null) {
                    this.$message.error('填写排班时间段')
                    return
                  }
                }
              }
            }
          }
        }
        this.tableData.forEach((e) => {
          e.item_list.forEach((j) => {
            if (j.end_time.split(':').length == 2) {
              j.end_time = j.end_time + ':00'
            }
            if (j.start_time.split(':').length == 2) {
              j.start_time = j.start_time + ':00'
            }
          })
        })
        forms.weeks = JSON.stringify(this.tableData)
        forms.id = this.form.id
        addScheduling(forms)
          .then(() => {
            this.$message({
              message: '排班成功',
              type: 'success',
            })
            this.$emit('showMain', 0)
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // Submit1() {},
      // 删除排班信息
      deleteScheduling() {
        const params = {
          id: this.form.id,
          type: 'week',
        }
        delScheduling(params).then(() => {
          this.$emit('showMain', 0)
        })
      },
    },
  }
</script>

<style></style>
